<template>

  <div class="home">
    <div class="user-container">
      <basic-container>
        <el-row :span="24">
          <el-col :span="6">
            <div class="user-wrapper">
              <div class="user-header">
                  <avue-avatar :src="userInfo.avatar" :size="60"></avue-avatar>
              </div>
              <div class="user-info">
                <div class="random-message">
                  欢迎登录, {{userInfo.nickName}}
                </div>
                <div class="user-dept">
                    <span>一杯茶一根烟，一个参数传一天!</span>
                </div>
                <div class="user-login-info">
                  上次登录时间：
                  <span id="last-login-time">{{userInfo.lastLoginTime}}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="el-card__body">
              <p style="text-align: center;">
                <img src="https://img.shields.io/badge/Release-V1.0.1-green.svg" />
                <img src="https://img.shields.io/badge/JDK-1.8+-green.svg" />
                <img src="https://img.shields.io/badge/Spring%20Cloud-Hoxton.SR7-blue.svg" />
                <img src="https://img.shields.io/badge/Spring%20Boot-2.2.5.RELEASE-blue.svg" />
                <img src="https://img.shields.io/badge/Author-goo-orange.svg" />
                <img src="https://img.shields.io/badge/Copyright%20-@Jpower-%23ff3f59.svg">
              </p>
            </div>
          </el-col>
        </el-row>
      </basic-container>
    </div>

    <div class="following">
        <el-row :span="24">
          <el-col :span="8">
            <div class="project">
              <basic-container>
                <div class="el-font-size">
                  <span>产品名称</span>
                  <el-divider direction="vertical"/>
                  <span><el-tag>JPower快速开发平台</el-tag></span>
                  <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>
                  <span>账号密码</span>
                  <el-divider direction="vertical"/>
                  <el-tag effect="plain">超级管理员(root/123456)</el-tag>
                  <el-tag effect="plain">租户管理员(admin/123456)</el-tag>
                  <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>
<!--                  <span>官网地址</span>-->
<!--                  <el-divider direction="vertical"/>-->
<!--                  <span><el-link href="https://jpower.top" target="_blank" type="primary">https://jpower.top</el-link></span>-->
<!--                  <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>-->
<!--                  <span>社区地址</span>-->
<!--                  <el-divider direction="vertical"/>-->
<!--                  <span><el-link href="https://sns.jpower.top" target="_blank" type="primary">https://sns.jpower.top</el-link></span>-->
<!--                  <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>-->
                  <span>获取文档</span>
                  <el-divider direction="vertical"/>
                  <span class="tag-group">
                    <el-tag type="success" style="cursor: pointer" onclick="window.open('https://www.kancloud.cn/guodingzhi/jpower')">立即阅读</el-tag>
<!--                    <el-divider direction="vertical"/>
                    <el-tag type="danger" style="cursor: pointer" onclick="window.open('https://www.kancloud.cn/guodingzhi/jpower')">收费版</el-tag>-->
                  </span>
                  <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>
                  <span>获取源码</span>
                  <el-divider direction="vertical"/>
                  <span class="tag-group">
                    <el-tag type="success" effect="dark" style="cursor: pointer" onclick="window.open('https://gitee.com/gdzWork/JPower')">JPower</el-tag>
                    <el-divider direction="vertical"/>
                    <el-tag type="danger" effect="dark" style="cursor: pointer" onclick="window.open('https://gitee.com/gdzWork/jpower-ui')">jpower-ui</el-tag>
                  </span>
                </div>
              </basic-container>
            </div>
            <div class="technology">
              <basic-container>
                <div class="project-wrapper">
                  <table>
                    <template v-for="(project, index) in projects">
                      <tr :key="index" v-if="index % 2 == 0">
                        <td>
                          <div class="project-avatar-wrapper">
                            <el-avatar class="project-avatar">{{
                                projects[index].avatar
                              }}</el-avatar>
                          </div>
                          <div class="project-detail">
                            <div class="project-name">
                              {{ projects[index].name }}
                            </div>
                            <div class="project-desc">
                              <p>{{ projects[index].des }}</p>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="project-avatar-wrapper">
                            <el-avatar class="project-avatar">{{
                                projects[index + 1].avatar
                              }}</el-avatar>
                          </div>
                          <div class="project-detail">
                            <div class="project-name">
                              {{ projects[index + 1].name }}
                            </div>
                            <div class="project-desc">
                              <p>{{ projects[index + 1].des }}</p>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                  </table>
                </div>
              </basic-container>
            </div>
          </el-col>
          <el-col :span="16">
            <basic-container>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="欢迎使用JPower" name="1">
                  <div>1.jpower-ui是JPower前端UI系统</div>
                  <div>2.JPower是一款由政府商业项目精心升级改造而成，提供 SpringCloud 全套解决方案</div>
                  <div>3.完美集成 SpringCloudAlibaba 系列组件的微服务架构</div>
                  <div>4.追求开发过程中更加高效，部署更加方便，生产更加稳定</div>
                  <div>5.JPower源码获取:<a target="_blank" href="https://gitee.com/gdzWork/JPower" style="color: red;">点击获取</a></div>
                </el-collapse-item>
                <el-collapse-item title="拥有的功能" name="2">
                  <div>1.采用前后端分离模式，前端基于Vue</div>
                  <div>2.后端基于SpringCloud的分布式架构以及单独封装的基于SpringBoot的单体式架构模块jpower-boot</div>
                  <div>3.前后端所有API完全兼容</div>
                  <div>4.针对不同功能分别封装不同组件，引入即用</div>
                  <div>5.集成阿里巴巴的Nacos完成统一的服务注册与配置</div>
                  <div>6.集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性</div>
                  <div>7.完整的SaaS多租户架构</div>
                  <div>8.集成JWT，完美支持多终端的接入与认证授权</div>
                  <div>9.集成基于Nacos的轻量级、高拓展性动态网关</div>
                  <div>10.实现基于Swagger SpringCloud聚合文档</div>
                  <div>11.提供文件上传与管理，目前实现了文件本地存储，后期会逐渐实现FastDFS、OSS等</div>
                  <div>12.精心设计的权限管理，角色权限精确到按钮</div>
                  <div>13.接口权限完美和按钮角色合二为一，统称功能权限</div>
                  <div>14.灵活的动态数据权限配置，完全Web可视化配置方式，无需重启直接生效</div>
                  <div>15.基于Nacos的动态网关鉴权，可在线配置，实时生效</div>
                  <div>16.集成Seata，支持分布式事务，无代码侵入，不失灵活与简洁</div>
                  <div>17.集成SkyWalking，全面对系统精心APM监控，并实现链路追踪，无代码侵入</div>
                  <div>18.未完待续...</div>
                </el-collapse-item>
                <el-collapse-item title="软件定制开发合作" name="3">
                  <div>1.接JPower系列架构的定制服务</div>
                  <div>2.接vue、springboot、springcloud、app、小程序等软件定制服务</div>
                  <div>3.有意向请联系QQ:<span style="color: red;">953944877</span></div>
                </el-collapse-item>
              </el-collapse>
            </basic-container>
          </el-col>
        </el-row>
    </div>

  </div>

</template>

<script>

import store from '@/store/';

export default {
  data () {
    return {
      userInfo: store.getters.userInfo,
      activeNames: ['1', '2', '3'],
      projects: [
        {
          name: "Spring全家桶",
          des: "Spring Boot & SpringCloud & SpringCloudAlibaba",
          avatar: "SP"
        },
        {
          name: "Mybatis-Plus",
          des: "Mybatis-plus：Mybatis 增强组件",
          avatar: "MP"
        },
        {
          name: "灰度发布",
          des: "修改ribbon的负载均衡策略来实现来灰度发布与本地协同开发",
          avatar: "灰"
        },
        {
          name: "文件存储",
          des: "封装文件接口，实现本地存储",
          avatar: "FE"
        },
        {
          name: "监控",
          des:
              "集成SpringBootAdmin、SkyWalking、Redis、Mysql等监控，对系统进行全方位监控护航",
          avatar: "JK"
        },
        {
          name: "容器技术",
          des: "基于Docker虚拟化容器技术，让迁移、部署更加方便快捷",
          avatar: "DK"
        }
      ]
    }
  },
  computed: {
  },
  created () {


  },
  methods: {
    handleChange(val) {
      window.console.log(val)
    }
  }
}
</script>

<style lang="scss">

.home {
  padding: 10px;
  box-sizing: border-box;
}

.user-wrapper {
  width: 100%;
  display: inline-block;


  .user-header {
    display: inline-block;
    vertical-align: middle;
  }

  .user-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;

    .random-message {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .user-dept,
    .user-login-info {
      color: rgba(0, 0, 0, 0.45);
      margin-bottom: 0.5rem;
      font-size: 0.8rem;
      line-height: 1.1rem;
    }
  }
}

.project-wrapper {
  padding: 0px 10px;

  .project-header {
    padding: 18px;
    margin-bottom: 16px;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    td {
      width: 50%;
      border-top: 1px solid #f1f1f1;
      border-bottom: 1px solid #f1f1f1;
      padding: 0.6rem;

      .project-avatar-wrapper {
        display: inline-block;
        float: left;
        margin-right: 0.7rem;

        .project-avatar {
          color: #42b983;
          background-color: #d6f8b8;
        }
      }

      &:nth-child(odd) {
        border-right: 1px solid #f1f1f1;
      }
    }
  }

  .project-detail {
    display: inline-block;
    float: left;
    text-align: left;
    width: 75%;

    .project-name {
      font-size: 0.9rem;
      margin-top: -2px;
      font-weight: 600;
    }

    .project-desc {
      color: rgba(0, 0, 0, 0.45);

      p {
        margin: 5px 0 0 0;
        font-size: 0.7rem;
        line-height: 1.3rem;
        white-space: normal;
      }
    }
  }
}

.el-font-size {
  font-size: 14px;
}

</style>
